@import './variable';

#app {
    // 登录页面
    .login-container {
        min-height: 100%;
        width: 100%;
        background-color: $basic-color;
        overflow: hidden;

        // 登录表单
        .login-form {
            position: relative;
            width: 520px;
            max-width: 100%;
            padding: 160px 35px 0;
            margin: 0 auto;
            overflow: hidden;

            // 登录表单项
            :deep(.el-form-item) {
                height: 49px;
                border: 1px solid $dark-gray-color;
                background: $black-color-point;
                border-radius: 5px;
                color: $dark-gray-color;
            }

            // 输入框
            :deep(.el-input) {
                display: inline-block;
                height: 47px;
                width: 85%;

                // 输入框外部边框
                .el-input__wrapper {
                    height: 47px;
                    width: 100%;
                    background: transparent;
                    border: 0;
                    border-radius: 0;
                    box-shadow: 0 0 0 0;
                    -webkit-appearance: none;

                    // 输入框中心文本
                    .el-input__inner {
                        color: $light-gray-color;
                        caret-color: $light-gray-color;
                    }
                }
            }

            // 包裹显示密码图标的组件: 上下居中 (Element-Plus 默认的 CSS 没有上下居中对齐)
            :deep(.el-input__suffix-inner) {
                align-items: center;
            }

            // 显示密码 & 隐藏密码图标
            .show-password-icon-container {
                color: $light-gray-color;
                cursor: pointer;

                &:hover {
                    color: $light-gray-color;
                }
            }

            // 验证码图片
            .captcha-image {
                &:hover {
                    cursor: pointer;
                }
            }

            // 登录按钮
            .login-button {
                width: 100%;
                box-sizing: border-box;
                font-weight: bold;
            }
        }

        // 登录页面按钮
        .icon-container {
            padding: 6px 5px 6px 15px;
            color: $light-gray-color;
            vertical-align: middle;
            display: inline-block;
        }

        // 登录页面标题
        .title-container {
            position: relative;

            .title {
                font-size: 26px;
                color: $light-gray-color;
                margin: 0 auto 40px auto;
                text-align: center;
                font-weight: bold;
            }
        }
    }
}
